<template>
	<view class="meetingWrap">
		<u--form ref="meetingSave" labelWidth="70" :model="mettingObj" :rules="rules">
			<view class="topModular borderWrap">
				<u-form-item label="预定日期:" prop="scheduledDate" borderBottom required @click="openTimeClick">
					<u--input disabled disabledColor="#ffffff" suffixIcon="arrow-right" placeholder="请选择预定日期" v-model="mettingObj.scheduledDate" border="none"></u--input>
				</u-form-item>
				<u-form-item label="预定时段:" prop="scheduledPeriod" borderBottom required @click="openTimePickerChange">
					<u--input disabled disabledColor="#ffffff" suffixIcon="arrow-right" placeholder="请选择预定时段" v-model="mettingObj.scheduledPeriod" border="none"></u--input>
				</u-form-item>
				<u-form-item label="参与人数:" prop="numberParticipants" borderBottom required>
					<u--input clearable type="digit" placeholder="请填写参与人数" v-model="mettingObj.numberParticipants" border="none"></u--input>
				</u-form-item>
			</view>
			<view class="middleModular borderWrap">
				<u-form-item label="预定说明:" labelPosition ="top">
					<u--textarea count v-model="mettingObj.reservationDescription" placeholder="请填写预定说明" ></u--textarea>
				</u-form-item>
			</view>
			<view class="topModular borderWrap">
				<u-form-item label="您的姓名:" prop="name" borderBottom required>
					<u--input clearable placeholder="请填写您的姓名" v-model="mettingObj.name" border="none"></u--input>
				</u-form-item>
				<u-form-item label="您的性别:" borderBottom required @click="openSexPickerChange">
					<u--input disabled disabledColor="#ffffff" placeholder="请选择您的性别" suffixIcon="arrow-right" :value="setSexPickerType(mettingObj.sex)" border="none"></u--input>
				</u-form-item>
				<u-form-item label="联系电话:" prop="telephone" borderBottom required>
					<u--input clearable type="digit" placeholder="请填写联系电话" v-model="mettingObj.telephone" border="none"></u--input>
				</u-form-item>
			</view>
			<u-button customStyle="margin-top:20px;font-size:18px;border-radius:30px"
			:loading="IfImplementEvent" size="large" color="#E41335"
			text="立即提交" @click="makeVisitSubmit">
			</u-button>
		</u--form>
		<picker-time @DateChange="time =>mettingObj.scheduledDate=time" @pickerChange="pickerChange" modeTime="date" ref="pickerTimeVisit" 
		:title="meetingPop.title" :defaultIndex="meetingPop.defaultIndex" :PickerColumnData="meetingPop.PickerColumnData" :pickerColumns="meetingPop.pickerColumns" :selectorType="meetingPop.selectorType" :formatterType="formatter">
		</picker-time>
	</view>
</template>

<script>
	import implementStateButton from "@/mixins/implementStateButton.js"
	import {meetingDetailsGet,saveMeetingPost} from "@/config/api.js"
	import {setNavTitle} from '@/utils/common.js'
	import {mapState} from "vuex"
	export default {
		mixins:[implementStateButton],
		data() {
			return {
				param:{},//接收参数
				meetingPop:{
					title:'到访日期',
					selectorType:'date',
					pickerColumns:[['男','女']],
					defaultIndex:[],
					PickerColumnData:[],//两个时间段
				},
				mettingObj:{
					scheduledDate:uni.$u.timeFormat(new Date(),"yyyy-mm-dd"),//预定日期
					scheduledPeriod:'',//预定时段
					numberParticipants:'',//参与人数
					reservationDescription:'',//预定说明
					name:'',
					sex:'0',
					telephone:''
				},
				rules: {
					'numberParticipants': {
						type: 'number',
						required: true,
						message: '请填写到访人数',
						trigger: ['blur', 'change']
					},
					"name":{
						type: 'string',
						required: true,
						message: '请填写您的姓名',
						trigger: ['blur', 'change']
					},
					"telephone":[
						{
							type: 'number',
							required: true,
							message: '请填写联系电话',
							trigger: ['blur', 'change']
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change','blur'],
						}
					]
				},
			};
		},
		computed:{
			...mapState("m_user",['userInfo']),
			setSexPickerType(){//男女转换
				return function(value){
					let array=['男','女']
					return array[value]
				}
			},
			getNowTime(){//获取当前时间 小时  设置时间段选择器
				return function(){
					let date=new Date()
					let h = date.getHours();//获取当前小时  
					let i=0
					if(h!=23){
						i=h+1
					}
					return [h,i]
				}
			}
		},
		methods:{
			openTimeClick(){//打开时间选择弹窗
			    this.meetingPop.title='预定日期'
				this.meetingPop.selectorType='date'
				this.$refs.pickerTimeVisit.dateSelectorShow=true
			},
			openSexPickerChange(){//打开picker弹窗
			    this.meetingPop.selectorType='picker'
				this.meetingPop.title='您的性别'
				this.meetingPop.defaultIndex=[]
				this.meetingPop.pickerColumns=[['男','女']],
				this.meetingPop.PickerColumnData=[]
				this.$refs.pickerTimeVisit.pickerSelectorShow=true
			},
			openTimePickerChange(){//打开picker弹窗
			    this.meetingPop.selectorType='picker'
				this.meetingPop.title='预定时段'
				this.meetingPop.defaultIndex=this.getNowTime()
				this.meetingPop.PickerColumnData=[['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00','23:00'], [ '00:00','01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']],//两个时间段
				this.meetingPop.pickerColumns=[['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00','23:00'], [ '00:00','01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']],//两个时间段
				this.$refs.pickerTimeVisit.pickerSelectorShow=true
			},
			pickerChange(value){//picker确定按钮
				if(value.type=='单列'){
					this.mettingObj.sex=value.value
				}else{
					this.mettingObj.scheduledPeriod=value.value
				}
			},
			formatter(type, value){
				if (type === 'year') {
			        return `${value}年`
			    }
			    if (type === 'month') {
			        return `${value}月`
			    }
			    if (type === 'day') {
			        return `${value}日`
			    }
			    return value
			},
			setMeetingObj(){//添加的时候才用到
				let time=this.getNowTime()
				this.mettingObj.scheduledPeriod=`${time[0]}:00 ~ ${time[1]}:00`//预定时段
				if(JSON.stringify(this.userInfo)=="{}")  return
				this.mettingObj.name=this.userInfo.userName
				this.mettingObj.sex=this.userInfo.sex
				this.mettingObj.telephone=this.userInfo.phone
			},
			async getMettingDetails(id){
				const res=meetingDetailsGet(id)
				if(res.code==0){
					this.mettingObj={
						scheduledDate:res.scheduledDate,//预定日期
						scheduledPeriod:res.scheduledPeriod,//预定时段
						numberParticipants:res.numberParticipants,//参与人数
						reservationDescription:res.reservationDescription,//预定说明
						name:res.name,
						sex:res.sex,
						telephone:res.telephone
					}
				}
				
			}
		},
		onReady(){//监听页面初次渲染完成
			setNavTitle(this.param.title)//设置导航栏标题
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.meetingSave.setRules(this.rules)
		},
		onLoad(option) {
			this.param=option
			this.setMeetingObj()
			if(option.id){
				this.getMettingDetails(option.id)
			}
			
		},
	}
</script>

<style lang="scss" scoped>
.meetingWrap{
	padding:10px;
	.topModular{
		padding:10px 15px 20px 15px;
		box-sizing: border-box;
	}
	.middleModular{
		padding:10px 15px;
		box-sizing: border-box;
		margin:20px 0;
	}
}
</style>
